<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>

<h1>The Form</h1>

<script  language=javascript>  
<!-- Initialize Variables -->
var text = [ ["The", "dog", "is", "good."], 
             ["The", "cat", "is", "better."] ]
var startWord = 1;
var wordGap = 2;
var div_index = 1;

var temp_sentence = "";

var array_index = 0;
var name = "";
var input_word = [];
for(var ini = 0; ini <100;ini++){
	input_word[ini] = "";
}
var data = [name,
			input_word
			];

foobar = name;
var data = {"name": foobar, "input_word": input_word};
data["name"]
data.name
</script>

<script  language=javascript>  
function  check_O()
{
    if(event.keyCode == 13){
       var word = document.getElementById("inputWord1").value;
       if(word == "yes"){
          alert("Match");
       }
       else{
          alert(word);
       }
       form = document.forms['FirstForm'];
       form.elements['word1'].value = word;    
       document.getElementById("user_display").style.display = "inline"; 
       document.getElementById("word1_display").style.display = "none"; 
      
       document.write(text[0][1]);
    }
}  

function  check( current_index, local_array_index )
{
    if(event.keyCode == 13){
	   var inputWord_index = "inputWord" + local_array_index;
       var word = document.getElementById(inputWord_index).value;
	   data[1][local_array_index] = word;
       if(word == "yes"){
          alert("Match");
       }
       else{
          alert(data[1][local_array_index]);
       }
       //form = document.forms['FirstForm'];
       //form.elements['word1'].value = word;    
	   var hind_current_input = "word_display" + current_index;
	   document.getElementById(hind_current_input).style.display = "none";
	   var next_index = current_index + 1; 
	   var display_next_text = "word_display" + next_index;
       document.getElementById(display_next_text).style.display = "inline"; 
	   next_index++; 
	   display_next_text = "word_display" + next_index;
       document.getElementById(display_next_text).style.display = "inline"; 
	   
	   //document.getElementById("inputWord").value = "";
    }
}  

function dispaly_result()
{
	$("#result").text(data[1]);
}

$(document).ready(function(){
    for(var i = 0; i < text.length; i++){
        var guess_word_index = startWord;
		for(var j = 0; j < text[i].length; j++){
            if(j == guess_word_index){
				guess_word_index = guess_word_index + wordGap + 1;
					
				var temp = '<div id="word_display' + div_index + '" style="display:none">' + temp_sentence + '</div>';
				$("#main_text").append(temp);
				temp_sentence = "<u>" + text[i][j] + "</u>" + " ";
				div_index++;
					
				var guess_word = '<input type="text" name="inputWord" id="inputWord' + array_index + '" onkeydown="check(' + div_index + ',' + array_index +')">';
				array_index++;
				temp = '<div id="word_display' + div_index +  '" style="display:none">' + guess_word + '</div>';
				$("#main_text").append(temp);
				div_index++;
			}
			else{
				temp_sentence = temp_sentence +  text[i][j] + " ";
			}
		}
	}
	var temp = '<div id="word_display' + div_index + '" style="display:none">' + temp_sentence + '</div>';
	$("#main_text").append(temp);
	
	document.getElementById("word_display1").style.display = "inline"; 
	document.getElementById("word_display2").style.display = "inline"; 
});
</script> 
<form action="" method="post" name="FirstForm">
    {{form.hidden_tag()}}

    <p id="main_text">
    </p>
    
    <p id="result">
    </p>

	<p><input type= button value="Display Result" onclick="dispaly_result()"></p>

    The dog is 
    <div id="word1_display" style="display:inline">
      <input type="text" name="inputWord1" id="inputWord1" onkeydown="check()">
    </div>

    <div id="word2_display" style="display:none">
      <input type="text" name="inputWord2" id="inputWord2" onkeydown="check()">
    </div>
    <!--input id="Button1" type="button"  value="Check" onclick="check()" /-->
    <div id="user_display" style="display:none">
        <u>cute</u>.
        <p>
          What is your name?:
          {{form.name(size=20)}}
        </p>
    <p><input type= button value="Submit!" onclick="this.form.submit();"></p>
    </div>
    <div id="words_display" style="display:none">
        {{form.word1}}
    </div>
</form>
